<template>
	<view class="content">

		<view class="top_video">
			<video :src="topVideo.video_url"></video>
			<view>{{topVideo.title}}</view>
		</view>

		<view class="coming_soon" v-if="list.length < 1">敬请期待</view>
		<view class="list" v-else>
			<view class="list_index">
				<view class="list_forr" v-for="(item, idx) in list" @click="taptap(item)">
					<image :src="item.imgs" mode=""></image>
					<view class="list_text">
						<view class="">歌手: {{item.author}}</view>
						<view class="gui-ellipsis">演唱曲目: {{item.title}}</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				id: null,
				topVideo: null,
				list: [],
			}
		},
		onLoad(opt) {
			this.show_loading();
			this.id = opt.id
			this.get_list();
		},
		methods: {
			get_list() {
				let self = this
				self.$boya.Request({
					url: '/activity/article',
					data: {
						type: 27,
					}
				}, function(res) {
					let data = res.data.data
					for (var i = 0; i < data.length; i++) {
						if (data[i].type == 2 && data[i].id == self.id) {
							let init_index = data[i].init_index
							for (var j = 0; j < init_index.length; j++) {
								if (init_index[j].description == 'top') {
									self.topVideo = init_index[j]
								} else {
									if (init_index[j].imgs) {
										let img = init_index[j].imgs.substring(2, init_index[j].imgs.length - 2);
										init_index[j].imgs = img
									}
									self.list.push(init_index[j])
								}
							}
						}
					}
					// console.log('list: ', self.list);
					self.hide_loading();
				}, false)
			},
			taptap(item) {
				console.log("content", item.content);
				uni.navigateTo({
					url: 'particulars?content=' + item.content + '&id=' + 236
				})
				// uni.navigateTo({
				// 	url: 'particulars?video_url=' + item.video_url + '&author=' + item.author + '&title=' + item.title
				// })
			},
			show_loading() {
				uni.showLoading({
					title: '请稍候...'
				});
			},
			hide_loading() {
				uni.hideLoading();
			},
		}
	}
</script>

<style>
	.content {
		width: 100vw;
		height: 145vh;
		font-size: 26rpx;
		background: url('../../../static/activity/centuryLaborUnion/gsBj.jpg') 100% 100% / 100% 100%;
	}

	.top_video {
		width: 80%;
		margin: 0 auto;
		text-align: center;
		margin-top: 610rpx;
		padding: 20rpx;
		background-color: white;
		border-radius: 20rpx;
	}

	.top_video>video {
		width: 100%;
		height: 300rpx;
	}

	.top_video>view {
		padding-top: 15rpx;
	}
	
	.coming_soon {
		color: white;
		font-size: 35rpx;
		text-align: center;
		margin-top: 150rpx;
	}

	.list {
		width: 88%;
		height: 1100rpx;
		max-height: 1100rpx;
		overflow: auto;
		margin: 0 auto;
		margin-top: 50rpx;
	}

	.list_index {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.list_forr {
		width: 320rpx;
		margin-bottom: 25rpx;
		border-radius: 15rpx;
		background-color: white;
	}

	.list_forr>image {
		width: 320rpx;
		height: 400rpx;
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
	}

	.list_text>view {
		margin: 8rpx 10rpx;
	}
</style>